<template>
	<view class="myGoodsBox">
		<u-navbar title="" height="120upx">
			<view class="u-nav-slot" slot="left">
				<view @tap="back" class="icon-left">
					<u-icon name="arrow-left" color="#fff" size="26"></u-icon>
				</view>
			</view>
			<view class="u-nav-slot logoBox" slot="center">
				<view class="navBox">我持有的</view>
			</view>
			<view class="u-nav-slot" slot="right">
				<view class="icon-right">
				</view>
			</view>
		</u-navbar>
		
		<view class="container">
			<view class="head">
				<text>相关产品</text>
				<u-checkbox-group size="28upx">
					<u-checkbox iconSize="30upx" @change="checkedFn" v-model="listQuery.isChecked" labelSize="30upx" activeColor="#EB5703" 
					labelColor="#999" shape="circle" label="可挂单"></u-checkbox>
				</u-checkbox-group>
			</view>
			<view class="tipsCont">Tips：数字字产品持有5个工作日即方可挂单</view>
			
			<view class="goodsContent">
				<scroll-view class="listview" enableBackToTop="true" scroll-y @scrolltolower="scrolltolower()">
					<view class="goodsBox">
						<view class="goods" v-for="(item,i) in dataList" :key="i" @tap="goDetails(item)">
							<view class="goodsMain">
								<view class="img">
									<image v-if="isImage(item.fileUrl)" class="img" :src="item.fileUrl" mode="scaleToFill">
									</image>
									<video v-else class="videoBox" :enable-progress-gesture="false" :src="item.fileUrl" muted
										:autoplay="false" :controls="false" loop></video>
									<text>#{{item.sortSn}}</text>
								</view>
								<view class="names">
									<text>{{item.collName}}</text>
									<image v-if="setImgShow(item) == 1" src="@/static/home/fileType1.png" mode="widthFix"></image>
									<image v-if="setImgShow(item) == 2" src="@/static/home/fileType2.png" mode="widthFix"></image>
									<image v-if="setImgShow(item) == 3" src="@/static/home/fileType3.png" mode="widthFix"></image>
								</view>
							</view>
						</view>
						<view class="noData" v-if="dataList.length == 0">
							<image class="noDataImg" src="@/static/noData.png" mode="widthFix"></image>
						</view>
					</view>
				 </scroll-view>
			</view>
		</view>
		<mix-loading ref="min_loading"></mix-loading>
	</view>
</template>

<script>
	import {getNftuserassets} from '@/api/user.js'
	import {
	    mapState ,mapMutations
	} from 'vuex'; 
	export default {
		data() {
			return {
				listQuery: {
					page: 1,
					pageSize: 10,
					pages:1,
					isChecked:false,
					status:""
				},
				dataList:[]
			}
		},
		computed:{
			...mapState(["hasLogin","uerInfo"]),
		},
		onLoad() {
			this.getGoodsList();
		},
		methods: {
			checkedFn(e){
				this.listQuery.status = e?1:"";
				this.getGoodsList();
			},
			scrolltolower(){
				if(this.listQuery.pages > this.listQuery.page){
					this.listQuery.page++;
					this.getGoodsList();
				}else{
					this.isEnd = true;
				}
			},
			goDetails(cur){
				uni.navigateTo({
					url:`/pages/detail/myGoodsDetail?id=${cur.id}&castingId=${cur.castingId}`
				})
			},
			getGoodsList(){
				this.$nextTick(()=>{
					this.$refs.min_loading.open('加载中，请稍后！');
				});
				getNftuserassets(this.listQuery).then(res => {
					this.listQuery.pages = res.data.obj.pages;
					if(res.data.success){
						let newList = res.data.obj.list.filter((item, index) => {
							if(item.fileUrl){
								item.fileUrl = (this.pathImg + item.fileUrl);
							}
							if(item.metafile){
								item.metafile = JSON.parse(item.metafile);
							}
							return item;
						});
						if(newList.length == 0 || newList.length < 10){
							this.isEnd = true
						}
						
						if (this.listQuery.page == 1) {
							this.dataList = [...newList];
						} else {
							this.dataList = [...this.dataList,...newList];
						}
					}
					uni.stopPullDownRefresh();
				}).catch(err=>{
					uni.stopPullDownRefresh();
				}).finally(() => {
					uni.stopPullDownRefresh();
					this.$refs.min_loading.close();
				});
			},
			back() {
				let canNavBack = getCurrentPages();
				if(canNavBack && canNavBack.length>1) {  
					uni.switchTab({
						url:"/pages/user/user"
					})
				} else {  
				    history.back();  
				}
			},
			setImgShow(cur){///判断文件类型
				if(cur.metafile.FileType){
					if(cur.metafile.FileType == ".glb"){
						return 3;
					}else if(cur.metafile.FileType == ".mp4"){
						return 2;
					}else{
						return 1;
					}
				}
				return 0;
			},
			// 判断这个地址是视频还是图片
			isImage(url) {
				if(url){
					let filePath = url.toLocaleLowerCase();
					if (filePath.indexOf(".mp4") != -1) {
						return false;
					} else {
						return true;
					}
				}else{
					return
				}
			},
		},
		onPullDownRefresh() {//下拉刷新
			this.isEnd = false;
			this.listQuery.page = 1;
			this.getGoodsList();
		}
	}
</script>

<style lang="less" scoped>
page{width: 100%;height: 100%;}
.myGoodsBox{
	padding-top: 160upx;
	color:#333;
	width: 100%;
	height: 100%;
	.container{
		padding: 0 30upx;
		width: 100%;
		height: 100%;
		.goodsContent{
			width: 100%;
			height: calc(100% - 140upx);
			.goodsBox{
				width: 100%;
				height: 100%;
				display: flex;
				justify-content: space-between;
				align-items: flex-start;
				align-content: flex-start;
				flex-wrap: wrap;
				padding-bottom: 60upx;
				.noData{
					width: 100%;
					height: 100%;
					display: flex;
					justify-content: center;
					align-items: center;
					image{
						width: 300upx;
					}
				}
				.goods{
					width: 50%;
					vertical-align: top;
					margin-bottom: 30upx;
					.goodsMain{
						border-radius: 26upx;
						background-color: #fff;
						padding-bottom: 30upx;
					}
					.names{
						display: flex;
						justify-content: space-between;
						align-items: center;
						padding: 0 20upx;
						padding-top: 16upx;
						image{
							width: 26upx;
						}
						>text{
							display: inline-block;
							flex: 1%;
							padding-right: 16upx;
							font-size: 24upx;
							color: #333;
						}
					}
					.img{
						overflow: hidden;
						border-radius: 26upx;
						position: relative;
						display: flex;
						align-items: center;
						justify-content: center;
						height: 288upx;
						.videoBox {
							width: 100%;
							display: block;
							height:716upx;
							max-height: 716upx;
							/deep/.uni-video-container{
								background-color: transparent;
							}
						}
						image{
							width: 100%;
						}
						text{
							width: 182upx;
							height: 34upx;
							position: absolute;
							top: 0;
							left: 50%;
							margin-left: -91upx;
							color: #fff;
							font-size: 20upx;
							display: inline-block;
							background-image: url(../../static/home/title2.png);
							background-size: 100% 100%;
							background-repeat: no-repeat;
							text-align: center;
							line-height: 34upx;
						}
					}
				}
				.goods:nth-child(odd){
					padding-right: 15upx;
				}
				.goods:nth-child(even){
					padding-left: 15upx;
				}
			}
			.listview,.goodsBox{
				width: 100%;
				height: 100%;
			}
		}
		.tipsCont{
			font-size: 24upx;
			color: #999;
			padding-top: 30upx;
			line-height: 24upx;
			padding-bottom: 40upx;
		}
		.head{
			padding-bottom: 16upx;
			height: 46upx;
			>text{
				color: #333;
				font-size: 30upx;
				position: relative;
				display: inline-block;
				line-height: 30upx;
				font-weight: 800;
			}
			>text::after{
				content: "";
				display: block;
				width: 32upx;
				height: 6upx;
				border-radius: 3upx;
				background-color: #EB5703;
				position: absolute;
				bottom: -16upx;
				left: 50%;
				margin-left: -16upx;
			}
			display: flex;
			justify-content: space-between;
		}
	}
	.logoBox{
		width: 100%;
		height: 100%;
		.navBox{
			height: 120upx;
			background-image: url("@/static/common/bg1.png");
			background-size: 100% 100%;
			background-repeat: no-repeat;
			display: flex;
			align-items: center;
			justify-content: center;
			color: #fff;
		}
	}
}
	
</style>
